﻿ @model IList<Nop.Core.Domain.Advert.Advertisement>
@{
    Layout = null;
    var index = 0;
}
<style>
.turn{height: 233px;float: left;overflow: hidden;position: relative;}
.turn #adpica{width: 742px;height: 233px;overflow: hidden;}
.turn #adpica img{width: 742px;height: 233px;float: left;overflow: hidden;}
.turn #adtipa{height: 16px;position: absolute;right: 8px;bottom: 8px;}
.turn #adtipa ul li{width: 19px;height: 19px;line-height: 19px;float:left;text-align: center;display: inline;margin: 0 1px;cursor: pointer;}
.show{display: block !important;}
.hidden{display: none !important;}
#adpica span{position: absolute;bottom: 0;left: 0;color: #fff;font-size: 14px;height: 33px;width: 742px;filter: alpha(opacity=70);opacity: 0.7;background: #000;text-indent: -9999em;}
#adpica p{position: absolute;bottom: 0;left: 0;color: #fff;font-size: 14px;height: 33px;line-height: 33px;width: 285px;padding-left: 5px;font-weight: bold;}
</style>

<div class="focus">
<!--focus-->
<div class="turn">
<div id="adpica">
@foreach (var m in Model)
{
<div @index==0?class="show":class="hidden" >
<a href="@m.Url">@Html.Raw(m.AdvertContent)</a>
</div>
index++;
}
</div>
<div id="adtipa">
<ul onmouseout="change()">
@for (int i = 0; i < Model.Count(); i++)
{
    if (i == 0)
    {
         @*<li class="current" onmouseover="adchangea(@(i + 1))">@(i + 1) </li>*@
        <li  onmouseover="adchangea(@(i + 1))"><img src="@Url.Content("~/themes/Cnet/Content/image/checked.png")" /> </li>
    }
    else
    {
        @*<li class="" onmouseover="adchangea(@(i + 1))">@(i + 1) </li>*@
        <li  onmouseover="adchangea(@(i + 1))"><img src="@Url.Content("~/themes/Cnet/Content/image/checked_no.png")" /> </li>
    }
}
</ul>
</div>
@if (Model.Count() > 0)
{
<script type="text/javascript">
//鼠标移过来的动作。显示当前图片，清除轮询。
    function adchangea(adid) {
        dochange(adid);
        clearTimeout(adisround);
}
//自动轮询
function adchangea2(adid) {
dochange(adid);
var adbigimg = document.getElementById("adpica").getElementsByTagName("div");
if ((adnext = adid + 1) > adbigimg.length) adnext = 1;
adisround = setTimeout('adchangea2(' + adnext + ')', 20000);
}
//显示当前图片
function dochange(adid) {
id = adid;
var adbigimg = document.getElementById("adpica").getElementsByTagName("div");
var adsmallimg = $("#adtipa li").find("img");
for (var adi = 0; adi < adbigimg.length; adi++) {
    adbigimg[adi].className = "hidden";
    var imgsrcIndex = adsmallimg[adi].src.lastIndexOf("/");
    var stahref = adsmallimg[adi].src.substring(0, imgsrcIndex + 1);
    adsmallimg[adi].src = stahref+"checked_no.png";
}
var imgsrcIndex = adsmallimg[adid - 1].src.lastIndexOf("/");
var stahref = adsmallimg[adid - 1].src.substring(0, imgsrcIndex + 1);
adbigimg[adid - 1].className = "show";
adsmallimg[adid - 1].src = stahref + "checked.png";
}
var adisround;
if (document.getElementById("adpica").getElementsByTagName("div").length > 1) {
    setTimeout("adchangea2(2)", 20000);
}
var id; //当前激活id
//鼠标移开ul块时，恢复轮询
function change() {adchangea2(id);}
</script>
}
</div>
</div>

